<template>
    <!-- <el-aside width="180px"> -->
      <el-col class="col_width">
        <el-menu
          active-text-color="#FEB307"
          @select="selectMenu"
          @open="handleOpen"
          @close="handleClose"
          :default-openeds="defaultOpened"
          :default-active="defaultActive">

            <el-submenu v-for="(tab) in menus" :index="tab.url" :key="tab.url">
                <template slot="title">
                    <i :class="['iconfont',tab.icon]"></i>
                    <span slot="title">{{tab.title}}</span>
                </template>

                <el-menu-item v-for="item in tab.child" 
                    :index="item.path" 
                    :key="item.path"
                    @click="clickMenu(item)">
                    <template slot="title">
                        <i class="iconfont icon-dian"></i>
                        <span slot="title">{{item.lable}}</span><MarkRemind :tipsNum="getTips(item)"/>
                    </template>
                </el-menu-item>

            </el-submenu>

        </el-menu>
      </el-col>
    <!-- </el-aside> -->
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex'
import MarkRemind from '@component/common/MarkRemind.vue';
import moment from 'moment';

    @Component({
        computed: {
            ...mapState({
                enterprise: 'enterprise',
                userInfo: 'userInfo',
                messageNumber: 'messageNumber',
                allTips: 'allTips',
                sysTime: 'sysTime'
            })
        },
        methods: {
            ...mapMutations('enterprise',['setCustomerStatusInfo']),
            ...mapActions([
                'getMessageNumber',
                'getAllTips',
                'getSysTime'
            ])
        },
        components: {
            MarkRemind
        }
    })
    export default class Menu extends Vue {
        menus = [{
                title: '我是卖方',
                url: 'seller',
                icon: 'icon-maichu1',
                child: [{
                        lable: '发布票据',
                        path: '/seller/posted/1/0',  // 1：发布票据；2：录入票据。如果没有票据id，默认为0
                        isAble: true
                    }, {
                        lable: '我的票据',
                        path: '/seller/myBill',
                        isAble: true
                    }, {
                        lable: '卖方订单',
                        path: '/seller/order',
                        isAble: true
                }]
            }, {
                title: '我是买方',
                url: 'buyer',
                icon: 'icon-mairu1',
                child: [{
                        lable: '我的竞价',
                        path: '/buyer/myBidding',
                        isAble: true
                    }, {
                        lable: '买方订单',
                        path: '/buyer/order',
                        isAble: true
                    }, {
                        lable: '发布买票',
                        path: '/buyer/wantBill',
                        isAble: false
                }]
            },
            {
                title: '企业管理',
                icon: 'icon-qiyeguanli',
                url: 'enterprise',
                child: [{
                        lable: '企业信息',
                        path: '/enterprise/info',
                        isAble: false
                    }, {
                        lable: '执剑人账户',
                        path: '/enterprise/judge',
                        isAble: true
                    }, {
                        lable: '汇票豆账户',
                        path: '/enterprise/draftBeans',
                        isAble: false
                    }, {
                        lable: '安全中心',
                        path: '/enterprise/safe',
                        isAble: false
                    }, {
                        lable: '消息中心',
                        path: '/enterprise/message',
                        isAble: false
                }]
        }]
        discount = {
            title: '银行速贴',
            icon: 'icon-yinhang',
            url: 'discount',
            child: [{
                    lable: '发起速贴',
                    path: '/discount/publish'
                }, {
                    lable: '速贴订单',
                    path: '/discount/order'
            }]
        }
        get defaultOpened(): string[] {
        return this.menus.map(v => v.url)
        }
        get defaultActive(): string {
            return this.$route.path
        }
        //查询用户信息完整度
        async getCustomerStatus () {
            let params = {
                customerId1: this.userInfo.customer_id,
                enterpriseId: this.userInfo.enterprise_id
            }
            let res = await this.$http.get('customerInfoStatus/queryCustomerInfoStatus',{params})
            if(res.status == 200){
                this.setCustomerStatusInfo(res.data)
            }
        }
        //查询速贴开户状态
        async accountStatus () {
            let res = await this.$http.get('fbank/enterprise/queryStatusInfo')
            if(res.status < 300 && res.data){
                if(res.data.fBank_enterprise_status == 5 || res.data.fBank_enterprise_status == 6){
                    this.menus.push(this.discount)
                }
            }
        }
        getTips (item) {
            switch (item.path) {
                case '/enterprise/message':
                    return this.messageNumber.unreadCount;
                case '/seller/myBill':
                    return this.allTips.billTotalCountNum;
                case '/seller/order':
                    return this.allTips.drawerOrderCount;
                case '/buyer/myBidding':
                    return this.allTips.biddingTotalCount;
                case '/buyer/order':
                    return this.allTips.receiverOrderCount;
                case '/discount/order':
                    return this.allTips.fbankOrderCount;
            }
        }
        mounted() {
            this.getCustomerStatus()
            this.accountStatus()
            this.getMessageNumber();
            this.getAllTips();
            this.getSysTime();
        }
        handleOpen(index: String, indexPath: [String]) {
            console.log(index, indexPath, 'menuOpen');
        }
        handleClose(index: String, indexPath: [String]) {
            console.log(index, indexPath, 'menuClose');
        }
        selectMenu(index: string, indexPath: any, menu: any) {
            //console.log(menu)
        }
        clickMenu (item) {
            let accountStatus = this.enterprise.customerStatusInfo.accountBinding
            if(accountStatus != 2 && item.isAble){
                this.$alert('抱歉：您暂无交易权限，请先完成账户绑定操作','提示',{
                    confirmButtonText: '我知道了',
                    customClass: 'custom-message-box'
                })
                return false
            }
            let systemTime = moment(this.sysTime).format('HH:mm:ss')
            let tradTime = '17:00:00'
            if (systemTime > tradTime && item.path == '/discount/publish') {
                this.$confirm('银行速贴业务办理时间：09:00 - 17:00！', '提示', {
                    confirmButtonText: '前往了解速贴业务介绍',
                    cancelButtonText: '取消',
                    customClass: 'custom-message-box',
                }).then(() => {
                    let backUrl = /back=.+$/.exec(location.hash);
                    location.href = backUrl && backUrl.length == 1 ? backUrl[0].split('=')[1] : "/discount.html";
                }).catch(() => {

                })
                // return false
            }
            this.$router.push(item.path)
        }
    }
</script>

<style lang="scss" scoped>
  .col_width {
    width: 180px;
    display: block;
  }
  .el-menu{
    border: none;
  }
  .el-submenu, .el-submenu:hover {
    background-color: $__color-border;
    color: $__color-show;
    font-size: .16rem;
    span{
        margin-left: 5px;
    }
    .el-submenu__title{
        i{
            color: $__color-show;
        }
    }
  }
</style>
<style lang="scss">
    .col_width{
        .el-submenu__title {
            height: 44px;
            line-height: 44px;
        }
        .el-submenu .el-menu-item{
            height: 44px;
            line-height: 44px;
            // padding: 0 45px;
            min-width: 180px;
            background: $__color-bg-primary;
            color: $__color-label;
            padding-left: 20px !important;
        }
        .el-menu-item{
            i{
                color: $__color-label;
            }
        }
    }
</style>
